<template>
    <el-tabs class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="交易记录">
            <el-table :data="recordData" >
                <el-table-column prop="date" label="时间" />
                <el-table-column prop="sale" label="操作" />
                <el-table-column prop="money" label="成交价" />
                <el-table-column prop="volume" label="成交量" />
                <el-table-column prop="turnover" label="成交额" />
                <el-table-column prop="premium" label="手续费" />
                <el-table-column prop="profit" label="盈亏" />
                <el-table-column prop="ratio" label="盈亏%" />
                <el-table-column prop="name" label="品种名称" />
                <el-table-column prop="code" label="品种代码" />
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="持仓品种">
            <el-table :data="recordData">
                <el-table-column prop="name" label="品种名称" />
                <el-table-column prop="code" label="品种代码" />
                <el-table-column prop="volume" label="数量" />
                <el-table-column prop="money" label="成本价" />
                <el-table-column prop="turnover" label="成交额" />
                <el-table-column prop="premium" label="手续费" />
                <el-table-column prop="profit" label="实现盈亏" />
                <el-table-column prop="ratio" label="浮盈%" />
                <el-table-column prop="money" label="最后价格" />
                <el-table-column prop="date" label="时间" />
            </el-table>
        </el-tab-pane>
    </el-tabs>


</template>

<script>
export default {
    name: 'transaction',
    data() {
        return {
            recordData: []
        }
    },
    mounted() {
        this.recordData = this.$store.state.recordData
    },
}
</script>

<style>
.demo-tabs {
    width: 95%;
    margin: 0 auto;
}

</style>

